<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 摄影师列表</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .banner {
            height: 120px;
            background: linear-gradient(135deg, #fd79a8 0%, #ff94b4 100%);
            border-radius: 12px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }
        .banner::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            right: -50px;
            top: -100px;
        }
        .banner::before {
            content: "";
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            left: -30px;
            bottom: -50px;
        }
        .search-box {
            position: relative;
            margin-bottom: 16px;
        }
        .search-box input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            background-color: #f0f0f0;
            border: none;
            border-radius: 8px;
            font-size: 15px;
        }
        .search-box i {
            position: absolute;
            left: 14px;
            top: 14px;
            color: #999;
            font-size: 16px;
        }
        .photographer-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="wechat-header">
            摄影师列表
        </div>
        
        <div class="wechat-content">
            <!-- Banner -->
            <div class="banner">
                <div class="text-center">
                    <div class="text-lg">第14届星漫动漫展</div>
                    <div class="text-sm mt-1">2024.6.15-16 | 上海展览中心</div>
                </div>
            </div>
            
            <!-- Search -->
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索摄影师名称或风格">
            </div>
            
            <!-- Category Filter -->
            <div class="flex gap-2 overflow-x-auto pb-2 mb-4">
                <div class="wechat-tag">全部</div>
                <div class="wechat-tag">写真</div>
                <div class="wechat-tag">人像</div>
                <div class="wechat-tag">婚礼</div>
                <div class="wechat-tag">儿童</div>
                <div class="wechat-tag">私房</div>
                <div class="wechat-tag">古风</div>
                <div class="wechat-tag">二次元</div>
            </div>
            
            <!-- Photographers List -->
            <div class="wechat-card flex gap-4 items-center">
                <div class="photographer-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">林夕摄影</div>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="text-gray text-sm">4.5</span>
                        </div>
                    </div>
                    <div class="text-gray text-sm mt-1">专注二次元/COSER写真摄影</div>
                    <div class="flex mt-2">
                        <div class="wechat-tag">二次元</div>
                        <div class="wechat-tag">人像</div>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-pink font-bold">¥199起/组</div>
                        <div class="text-sm text-gray">已接单: 42</div>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card flex gap-4 items-center">
                <div class="photographer-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">青木影像工作室</div>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span class="text-gray text-sm">5.0</span>
                        </div>
                    </div>
                    <div class="text-gray text-sm mt-1">古风/现代写真摄影师，提供化妆服务</div>
                    <div class="flex mt-2">
                        <div class="wechat-tag">古风</div>
                        <div class="wechat-tag">写真</div>
                        <div class="wechat-tag">婚礼</div>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-pink font-bold">¥299起/组</div>
                        <div class="text-sm text-gray">已接单: 136</div>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card flex gap-4 items-center">
                <div class="photographer-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">星光摄影</div>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                            <span class="text-gray text-sm">4.0</span>
                        </div>
                    </div>
                    <div class="text-gray text-sm mt-1">多年漫展经验，擅长动漫人物还原</div>
                    <div class="flex mt-2">
                        <div class="wechat-tag">二次元</div>
                        <div class="wechat-tag">写真</div>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-pink font-bold">¥149起/组</div>
                        <div class="text-sm text-gray">已接单: 78</div>
                    </div>
                </div>
            </div>
            
            <div class="wechat-card flex gap-4 items-center">
                <div class="photographer-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <div class="font-bold">光影记忆馆</div>
                        <div class="rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span class="text-gray text-sm">4.7</span>
                        </div>
                    </div>
                    <div class="text-gray text-sm mt-1">儿童/家庭/情侣写真，温馨自然风格</div>
                    <div class="flex mt-2">
                        <div class="wechat-tag">儿童</div>
                        <div class="wechat-tag">人像</div>
                    </div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-pink font-bold">¥249起/组</div>
                        <div class="text-sm text-gray">已接单: 93</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer Navigation -->
        <div class="wechat-footer">
            <div class="wechat-tab active">
                <i class="fas fa-camera"></i>
                <span>摄影师</span>
            </div>
            <div class="wechat-tab">
                <i class="fas fa-list-alt"></i>
                <span>我的订单</span>
            </div>
            <div class="wechat-tab">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 